<template>
	<view>
		<view class="content">
			<view class="row">
				<view class="nominal">收件人</view>
				<view class="input"><input placeholder="请输入收件人姓名" type="text" v-model="name" /></view>
			</view>
			<view class="row">
				<view class="nominal">电话号码</view>
				<view class="input"><input placeholder="请输入收件人电话号码" type="text" v-model="tel" /></view>
			</view>
			<view class="row">
				<view class="nominal">所在地区</view>
				<view class="input" @tap="chooseCity">{{region.name}}</view>
			</view>
			<view class="row">
				<view class="nominal">门牌号</view>
				<view class="input"><textarea v-model="detailed" auto-height="true" placeholder="输入详细地址"></textarea>
				</view>
			</view>
			<view class="row">
				<view class="nominal">设置默认地址</view>
				<view class="input switch">
					<switch color="#ff2626" :checked="isDefault" @change="isDefaultChange" />
				</view>
			</view>
			<view class="row" @tap="del">
				<view class="del">删除收货地址</view>
			</view>
		</view>
		<view class="save" @tap="save">
			<view class="btn">保存地址</view>
		</view>
	</view>
</template>

<script>
	export default {


		data() {
			return {
				editType: 'edit',
				id: '',
				name: '',
				tel: '',
				detailed: '',
				isDefault: false,
				cityPickerValue: [0, 0, 1],
				themeColor: '#007AFF',
				// region: { label: '请点击选择地址', value: [], cityCode: '' },
				region: {
					name: "请点击选择地址",
					address: ""
				}, //位置名称
				detailed: '', //详细地址
				latitude: '', //经纬度
				longitude: '' //经纬度
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'address',
				success: e => {
					console.log('e', e)
					this.id = e.data.id;
					this.name = e.data.consignee;
					this.tel = e.data.mobile;
					this.detailed = e.data.detailed;
					this.isDefault = e.data.default_site == 1 ? true : false;

					this.region.name = e.data.region;

					this.latitude = e.data.latitude;
					this.longitude = e.data.longitude


				}
			});
		},

		methods: {
			chooseCity() {
				var self = this;
				uni.chooseLocation({
					success: function(res) {
						self.region.name = res.name;
						self.region.address = res.address;
						self.latitude = res.latitude;
						self.longitude = res.longitude;

					}
				});
			},
			isDefaultChange(e) {
				this.isDefault = e.detail.value;
			},
			del() {
				uni.showModal({
					title: '删除提示',
					content: '你将删除这个收货地址',
					success: res => {
						if (res.confirm) {
							///地址删除
							this.$http('address.delAddress',{
								id:this.id,
								token: this.$tools.getToken()
							}).then(res=>{
								console.log('res del',res);
								if(res.code==200){
									this.$tools.showMsg('删除成功')
									uni.navigateBack()
								}
							})
						}
					}
				});
			},
			save() {
				this.$http('address.saveAddress', {
					id: this.id,
					consignee: this.name,
					mobile: this.tel,
					region: this.region.name,
					detailed: this.detailed,
					default_site: this.isDefault == true ? 1 : 0,
					token: this.$tools.getToken(),
					latitude: this.latitude,
					longitude: this.longitude,
				}).then(res => {
					if(res.code==200){
						this.$tools.showMsg('修改成功')
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.save {
		view {
			display: flex;
		}

		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {

			margin: 0 46rpx;
			height: 80upx;
			width: 100%;
			border-radius: 80upx;
			background: linear-gradient(128.5deg, rgba(250, 229, 104, 1) 0%, rgba(255, 200, 47, 1) 100%), linear-gradient(135.25deg, rgba(248, 220, 89, 1) 0%, rgba(246, 188, 87, 1) 100%), rgba(204, 204, 204, 1);

			justify-content: center;
			align-items: center;


			font-size: 30upx;
		}
	}

	.content {
		display: flex;
		flex-wrap: wrap;

		view {
			display: flex;
		}

		.row {
			width: 94%;

			margin: 0 3%;
			border-top: solid 1upx #eee;

			.nominal {
				width: 30%;
				height: 120upx;
				font-weight: 200;
				font-size: 30upx;
				align-items: center;
			}

			.input {
				width: 70%;
				padding: 20upx 0;
				align-items: center;
				font-size: 30upx;

				&.switch {
					justify-content: flex-end;
				}

				.textarea {
					margin: 20upx 0;
					min-height: 120upx;
				}
			}

			.del {
				width: 100%;
				height: 80upx;
				justify-content: center;
				align-items: center;
				font-size: 36upx;
				color: #ffffff;
				border-radius: 8rpx;
				background-color: #ff2626;
				border-bottom: solid 1upx #eee;
			}
		}
	}
</style>
